<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css">
    <style>
      text{
        text-anchor: middle;
        dominant-baseline:middle;
      }
    </style>
  </head>
  <body>

    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      const svg = d3.select('body').append('svg')
        .attr('width',800)
        .attr('height',600)
        .style('border','1px solid #ccc')

      const g = svg.append('g').attr('transform','translate(400,300)')

      //const data = [100,90,80,85,95,60] ;
      const data = [
        {name:'zs',score:100},
        {name:'ls',score:90},
        {name:'ww',score:80},
        {name:'zl',score:85},
        {name:'dmc',score:95},
        {name:'zzt',score:60},
      ]

      const names = data.map(d=>d.name);

      const colorScale = d3.scaleOrdinal(names,d3.schemeSet2);

      const pie = d3.pie()
        .value(d=>d.score)
        //.sort( function(a,b){ return a.score - b.score} )
        .sort((a,b)=>d3.ascending(a.score,b.score))
        .padAngle(0.02)
        //.startAngle(Math.PI/2)
        //.endAngle(Math.PI*2.5)
      const arc = d3.arc()
        .innerRadius(100)
        .outerRadius(200)

      g.selectAll('g')
        .data(pie(data))
        .join('g')
        .call(g=>{
          g.append('path')
          .attr('d',d=>arc(d))
          .attr('stroke','#666')
          .attr('fill',d=>colorScale(d.data.name))
        })
        .call(g=>{
          g.append('text')
            .attr('x',d=>arc.centroid(d)[0])
            .attr('y',d=>arc.centroid(d)[1])
            .text(d=>d.data.name+':'+d.data.score)
        })

      

    </script>
  </body>
</html>
